<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-13 11:50:32
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-12-14 09:55:33
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <span style="margin-left: 10px">更进类型设置</span>
      </div>
      <div>
        <el-button type="primary" size="default" @click="onSubmit"
          >保存</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-ipt" v-for="(item, index) in steps" :key="index">
        <el-input v-model="item.step" placeholder="请输入联系方式"></el-input>
        <i
          class="iconfont icon-close"
          @click="reduceType(index)"
          v-if="index !== 0"
        ></i>
      </div>
    </div>
    <div class="addType" @click="addType">+ 添加类型</div>
  </div>
</template>

<script>
import { furtherList, updateStepType } from "@/api/sys";
export default {
  data() {
    return {
      steps: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
  
    //   保存
    onSubmit() {
      console.log(1);
      for (var i = 0; i < this.steps.length; i++) {
        if (this.steps[i].step == "") {
          return this.$message.info("请填写或者删除已增加的空白类型");
        }
      }
      updateStepType(this.steps).then((res) => {
        this.$message.success(res.msg);
      });
    },
    // 增加类型
    addType() {
      this.steps.push({
        step: "",
      });
      //   this.steps.forEach((item, index) => (item.value = index));
      //   console.log(this.steps);
    },
    // 删除类型
    reduceType(i) {
      this.steps.splice(i, 1);
    },
    // 获取列表
    getList() {
      furtherList().then((res) => {
        this.steps = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
  }
}
.content {
  margin-top: 20px;
  .el-input {
    width: 330px;
  }
  .content-ipt {
    margin-top: 20px;
    i {
      font-size: 14px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.addType {
  font-size: 16px;
  margin-top: 20px;
  padding-bottom: 20px;
  color: #1267fa;
}
</style>